<style>
    #change-topic {
        padding: 20px 25px 25px 0;
    }

    .layui-form-label {
        width: 140px;
    }

    .layui-input-block {
        margin-left: 170px;
    }

    .layui-layer-page .layui-layer-content {
        overflow: visible !important;
    }
</style>
<div class="layui-fluid" id="change-topic">
    <form class="layui-form" action="" lay-filter="change-topic-form">

        <div class="layui-form-item">
            <div class="layui-row">
                <div class="layui-col-md6">
                    <label class="layui-form-label website-form-item-require">课题类型：</label>
                    <div class="layui-input-block">
                        <select name="topicClassifyCode" lay-filter="topicClassifyCode" lay-verify="required">
                            <option value="">请选择</option>
                            <option th:each="item : ${topicClassifyCode}"
                                    th:value="${item.code}" th:text="${item.name}">
                            </option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">

            <div class="layui-row">
                <div class="layui-col-md12">
                    <label class="layui-form-label">课题分类：</label>
                    <input type="hidden" name="topicLevelType" id="topicLevelTypeVal"/>
                    <div id="entrustType">
                        <div class="layui-col-md4">
                            <select lay-filter="entrustType">
                                <option value="">请选择</option>
                                <option
                                        th:each="item : ${annualType}"
                                        th:value="${item.code}" th:text="${item.name}">
                                </option>
                            </select>
                        </div>
                    </div>
                    <div id="annualType">
                        <div class="layui-col-md3">
                            <select id="typeId" lay-filter="typeId">
                                <option value="">请选择</option>
                            </select>
                        </div>
                        <div class="layui-col-md3" style="margin-left: 5px;">
                            <select id="levelTypeCode" lay-filter="annualType">
                                <option value="">请选择</option>
                            </select>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="layui-form-item website-hide">
            <button class="layui-btn" lay-submit="" lay-filter="change-topic-form-submit" id="submit"></button>
        </div>
    </form>
</div>

<script data-th-inline="javascript">
    layui.use(['website', 'form', 'validate'], function () {
        var $ = layui.$,
            website = layui.website,
            layer = layui.layer,
            form = layui.form,
            groups = [[${groups}]],
            topicSelectIds = [[${topicSelectIds}]],
            validate = layui.validate;
        form.verify(validate);
        form.render();
        initSelect();

        /**
         * 初始化下拉框
         */
        function initSelect() {
            $("#entrustType").addClass("website-hide");
            $("#annualType").addClass("website-hide");
            $.each(groups, function (k, v) {
                $('#typeId').append(new Option(v.type.name, v.type.code));
            });
            layui.form.render("select");
            //年度课题与委托课题显示的不一样哦。
            form.on('select(topicClassifyCode)', function (data) {
                var tmp = data.value;
                debugger
                //年度
                if (tmp === 'annual') {
                    $("#annualType").removeClass("website-hide");
                    $("#entrustType").addClass("website-hide");
                } else if (tmp === 'entrust') {
                    $("#entrustType").removeClass("website-hide");
                    $("#annualType").addClass("website-hide");
                }else{
                    $("#annualType").addClass("website-hide");
                    $("#entrustType").addClass("website-hide");
                }
            })
            form.on('select(typeId)', function (data) {
                var tmp = data.value;
                $("#levelTypeCode").empty();
                $.each(groups, function (k, v) {
                    if (v.type.code == tmp) {
                        if (v.course.length != 0) {
                            $('#levelTypeCode').append(new Option("请选择", ""));
                            $.each(v.course, function (key, value) {
                                $('#levelTypeCode').append(new Option(value.name, value.code));
                            });
                        } else {
                            $('#levelTypeCode').append(new Option('无内容', ''));
                        }
                    }
                });
                $("#topicLevelTypeVal").val("");
                layui.form.render("select");
            })
            form.on('select(entrustType)', function (data) {
                $("#topicLevelTypeVal").val(data.value);
            })

            form.on('select(annualType)', function (data) {
                $("#topicLevelTypeVal").val(data.value);
            })
        }

        /**
         * 转课题方法
         */
        form.on('submit(change-topic-form-submit)', function (data) {

            website.post(ctx + 'biz/topicSelect/changeTopics/' + topicSelectIds, data.field, function () {
                layer.closeAll();
                website.alert.success('转课题成功！');
                $('#website-topic-select').find('#query').click();
            });

            return false;
        });
    });
</script>